<template>
	<view id="index-ticket">
		<view class="ticket-box">
			<image src="/static/icon/ticket_icon_02.png" v-show="tabIndex == 1" class="head-bg" mode=""></image>
			<image src="/static/icon/ticket_icon_01.png"  v-show="tabIndex == 2" class="head-bg" mode=""></image>
			<view class="ticket-row">
				<view class="row-box">
					<view class="row-tab">
						<view :class="['tab',tabIndex == 1?'tab-act':'']" @click="tabIndex = 1">火车票</view>
						<view :class="['tab',tabIndex == 2?'tab-act':'']" @click="tabIndex = 2">机票</view>
					</view>
					<view class="row-item">
						<view class="h3">上海</view>
						<image src="/static/icon/icon_fly_02.png"  v-show="tabIndex == 2" class="row-icon" mode=""></image>
						<image src="/static/icon/icon_fly_01.png"  v-show="tabIndex == 1" class="row-icon" mode=""></image>
						<view class="h3">深圳</view>
					</view>
					<view class="time">{{time}}出发</view>
				</view>
				<view class="radio-box">
					<image src="/static/icon/icon_radio_01.png" class="radio-icon" mode=""></image>
					<view class="h6">高铁/动车</view>
				</view>
				<view class="content-footer">
					<view class="footer-btn" @click="submitReal()">火车票查询</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabIndex: 1,
			time: '',
		};
	},
	onLoad() {
		let date = new Date();
		this.time = ((date.getMonth() + 1) < 10?'0'+(date.getMonth() + 1):(date.getMonth() + 1) )+'月'+ date.getDate()+'日';
	},
	components: {

	},
	onShow() {

	},
	methods: {
		// 提交
		submitReal(){
			this.$api.msg('功能开发中')
		},
	}
};
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>

<style scoped lang="scss">
	.ticket-box {
		position: relative;
		// width: 100%;
		// height: 100vh;
		.head-bg {
			width: 100%;
			height: 392rpx;
		}
		.ticket-row {
			width: 100%;
			padding: 0px 32rpx;
			box-sizing: border-box;
			position: absolute;
			top: 296rpx;
			left: 50%;
			transform: translateX(-50%);
			.row-box {
				width: 686rpx;
				background: #fff;
				box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.07);
				border-radius: 20rpx;
				.row-tab {
					width: 100%;
					height: 96rpx;
					display: flex;
					align-items: center;
					border-radius: 20rpx 20rpx 0px 0px;
					overflow: hidden;
					.tab {
						width: 50%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36rpx;
						font-weight: 500;
						color: #7A7C80;
						background: #FDF4F6;
					}
					.tab-act {
						color: #EE486C;
						background: #fff;
					}
				}
				.row-item {
					width: 100%;
					height: 198rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0px 36rpx;
					box-sizing: border-box;
					.h3 {
						font-size: 48rpx;
						font-weight: 600;
						color: #1D1E22;
					}
					.row-icon {
						width: 96rpx;
						height: 96rpx;
					}
				}
				.time {
					width: 100%;
					height: 132rpx;
					display: flex;
					align-items: center;
					border-top: 2rpx solid #E8EDF5;
					font-size: 32rpx;
					color: #1D1E22;
					padding: 0px 36rpx;
					box-sizing: border-box;
				}
			}
			
			.radio-box {
				padding-top: 48rpx;
				display: flex;
				align-items: center;
				.radio-icon {
					width: 36rpx;
					height: 36rpx;
					display: block;
					margin-right: 24rpx;
				}
				.h6 {
					font-size: 28rpx;
					color: #7A7C80;
				}
			}
			
			.content-footer {
				width: 100%;
				padding: 62rpx 0rpx 0px;
				box-sizing: border-box;
				.footer-btn {
					width: 100%;
					height: 90rpx;
					background: #EE486C;
					border-radius: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #fff;
				}
			}
			
		}
	}
</style>
